<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/overview.css">
	<link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">
	<link rel="stylesheet" href="/scriptZIP/index.css">

	<title>首页</title>

	<style>
		/* 日历样式 */
		.echarts {
			width: 100% !important;
			height: 100% !important;
		}

		input[readonly] {
			display: none;
		}

		.flatpickr-calendar.inline,
		.flatpickr-rContainer,
		.flatpickr-days,
		.dayContainer {
			width: 100%;
		}

		.flatpickr-months {
			margin-top: -3px;
			padding-top: 35px;
			font-size: 18px;
		}

		.flatpickr-prev-month,
		.flatpickr-next-month {
			height: 60px !important;
			display: flex;
			align-items: center;
			padding: 10px 20px !important;
		}

		.flatpickr-innerContainer {
			margin-top: 30px;
		}

		.flatpickr-calendar.inline {
			font-size: 15px;
			height: 500px;
			width: 82%;
			margin: 0px auto;
		}

		.flatpickr-weekdays {
			font-size: 18px;
		}

		.flatpickr-day {
			font-size: 18px;
			height: 60px;
			line-height: 60px !important;
		}

		.flatpickr-calendar {
			box-shadow: none;
		}

		.dayContainer,
		.flatpickr-day {
			max-width: none;
		}

		[v-cloak] {
			display: none;
		}

		.content-box {
			width: 100%;
		}

		.head_top {
			margin: 32px 25px 20px 25px;
		}

		.head-box {
			background: #FFFFFF;
			box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.2);
			border-radius: 30px;
			overflow: hidden;

			.head_item {
				width: 110px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				/* font-size: 28px; */
				color: #FFFFFF;
				padding: 22px;
				padding-left: 90px;

				.font {
					font-size: 30px;
					text-align: center;
					display: block;
					margin-bottom: 14px;
				}

				div {
					display: block;
					text-align: center;
				}
			}
		}

		.chart-header {
			display: flex;
			justify-content: space-between;
			background-color: #fff;

			.chart-header-title {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 25px;
				color: #6E6C73;
				width: 320px;
				padding: 10px;
			}
		}

		.chart-box {
			background: #FFFFFF;
			box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.2);
			border-radius: 30px;
			overflow: hidden;
			margin-bottom: 20px;

			.line {
				box-shadow: none;
			}

		}

		.chart_box {

			.bar,
			.pie {
				background: #FFFFFF;
				box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.2);
				border-radius: 30px;
				overflow: hidden;
				margin-bottom: 20px;
				width: 46.5%;
				height: auto;
			}
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="head-box">
			<div class="block">
				<!-- <span class="demonstration">默认</span> -->
				<el-date-picker v-model="timeVal" type="daterange" @change="changeTime" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<div class="head_mask" v-if="!active.school"><img src="/wechat//image/loading.gif" alt=""></i></div>
			<div class="head_top" v-cloak>
				<div class="head_item"
					style="background: url('../image/55.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.totalAmount/100 || 0}}</div>
					<div>总收入(元)</div>
				</div>
				<div class="head_item"
					style="background: url('../image/33.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.newSignings || 0}}</div>
					<div>新签(人数)</div>
				</div>
				<div class="head_item"
					style="background: url('../image/22.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.renewalNumber || 0}}</div>
					<div>续费(人数)</div>
				</div>
				<div class="head_item"
					style="background: url('../image/66.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.toBeRenewed || 0}}</div>
					<div>待续费(人数)</div>
				</div>
				<div class="head_item"
					style="background: url('../image/44.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.tableMoney/100|| 0}}</div>
					<div>餐费(元)</div>
				</div>
				<div class="head_item"
					style="background: url('../image/11.png')  no-repeat 100% 100%; background-size: contain;">
					<div class="font">{{count.returnPremium || 0}}</div>
					<div>退课(人数)</div>
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 图表 -->
			<div class="content-box">
				<div class="chart-box">
					<div class="chart-header">
						<div class="chart-header-title">
							<div style="width: 10px;
								height:  40px;
								margin: 0 20px;
								float: left;
								background: linear-gradient(0deg, #A1C4FD 0%, #C2E9FB 100%);
								border-radius: 9px;"></div>
							<div>数据来源分析</div>
						</div>
						<div class="block">
							<!-- <span class="demonstration">默认</span> -->
							<el-date-picker v-model="timeVal2" type="daterange" @change="changeTime2"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>
					</div>
					<div class="line" id="main1" style="width: 98%;height: 330px;">
						<v-chart ref="ref_echart2" :option="option0" />
					</div>
				</div>
				<div class="content-box">
					<div class="chart-box">
						<div class="chart-header">
							<div class="chart-header-title">
								<div style="width: 10px;
								height: 40px;
								margin: 0 20px;
								float: left;
								background: linear-gradient(0deg, #A1C4FD 0%, #C2E9FB 100%);
								border-radius: 9px;"></div>
								<div>报名人数分析</div>
							</div>
							<div class="block">
								<!-- <span class="demonstration">默认</span> -->
								<el-date-picker v-model="timeVal3" type="daterange" @change="changeTime3"
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
								</el-date-picker>
							</div>
						</div>
						<div class="line" id="main1" style="width: 98%;height: 330px;">
							<v-chart ref="ref_echart3" :option="option1" />
						</div>
					</div>
					<div class="chart_box">
						<div class="bar">
							<div class="chart-header">
								<div class="chart-header-title">
									<div style="width: 10px;
								height: 40px;
								margin: 0 20px;
								float: left;
								background: linear-gradient(0deg, #A1C4FD 0%, #C2E9FB 100%);
								border-radius: 9px;"></div>
									<div>未报读原因分析</div>
								</div>
								<div class="block">
									<!-- <span class="demonstration">默认</span> -->
									<el-date-picker v-model="timeVal4" type="daterange" @change="changeTime4"
										range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
									</el-date-picker>
								</div>
							</div>
							<div id="main3" style="width: 100%;height: 330px;">
								<v-chart ref="ref_echart4" :option="option3" />
							</div>
						</div>
						<div class="pie">
							<div class="chart-header">
								<div class="chart-header-title">
									<div style="width: 10px;
								height: 40px;
								margin: 0 20px;
								float: left;
								background: linear-gradient(0deg, #A1C4FD 0%, #C2E9FB 100%);
								border-radius: 9px;"></div>
									<div>报读课程分析</div>
								</div>
								<div class="block">
									<!-- <span class="demonstration">默认</span> -->
									<el-date-picker v-model="timeVal5" type="daterange" @change="changeTime5"
										range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
									</el-date-picker>
								</div>
							</div>
							<div id="main4" style="width: 100%;">
								<div id="main5" style="width: 50%;height: 330px; float: left;"></div>
								<div id="main6" style="width: 50%;height: 330px;float: left;"></div>
								<!-- <v-chart  ref="ref_echart5" style="width: 50%;height: 330px;"  :option="option4" />
							<v-chart ref="ref_echart6" style="width: 50%;height: 330px;"  :option="option5" /> -->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <script src="https://cdn.w7.cc/ued/console/jssdkv2.js"></script> -->

		<script src="/scriptZIP/qs.min.js"></script>
		<script src="/js/auth_util.js"></script>
		<script src="/scriptZIP/echarts.min.js"></script>
		<script src="/scriptZIP/vue.min.js"></script>
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/index.umd.min.js"></script>
		<script src="/scriptZIP/flatpickr.min.js"></script>
		<script src="/scriptZIP/zh.min.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script src="/lib/vue-flatpickr.min.js"></script>
		<script src="/js/common.js"></script>

		<script>
			Vue.component('v-chart', VueECharts);
			Vue.component('flat-pickr', VueFlatpickr);

			var xs = [];
			for (var i = 27; i >= 0; i--)
				xs.push(dayjs().subtract(i, 'day').date());

			new Vue({
				el: '#app',
				data: {
					devices: [0, 0, 0, 0, 0, 0, 0, 0],
					schools: [0, 0, 0, 0, 0],
					date: dayjs().format('YYYY-MM-DD'),

					data1: xs,
					data2: xs, 

					attendanceCount: 0,

					agentId: null,
					count: {},
					active: {},
					code: "",
					timeVal: [],
					timeVal2: [],
					timeVal3: [],
					timeVal4: [],
					timeVal5: [],
					list2: [],
					option0: {},
					option1: {},
					option3: {},
					option4: {},
					option5: {},
					courseId: ''
				},
				created: function () {
					var param = {};
					abled('enrollmentAnalysis', this);


					try {
						// 可能会报错的代码
						if (/agent/.test(top.location.href)) {
							this.agentId = top_params().id;
							param = { params: { agentId: this.agentId } };
						}
					} catch (error) {
						// 错误处理代码
						console.log(error); // 输出错误信息
					}
					this.timeVal = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					this.timeVal2 = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					this.timeVal3 = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					this.timeVal4 = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					this.timeVal5 = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					this.changeTime();
					this.changeTime2();
					this.changeTime3();
					this.changeTime4();
					this.changeTime5();

				},
				methods: {
					changeTime() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal[1]).format('YYYY-MM-DD')
							}
						};
						axios.get('/pc/enrollment/home', param).then(function (res) {
							this.count = res.data;
							this.active = { school: true }
						}.bind(this));
					},

					changeTime6() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal5[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal5[1]).format('YYYY-MM-DD'),
								courseId: this.courseId
							}
						};
						axios.get('/pc/enrollment/getCourseAsSchool', param).then(function (res) {
							let list2 = res.data;
							// this.$refs?.ref_echart1?.resize()
							// const option = this.$refs?.ref_echart1.getOption()
							// console.log('3334', this.$refs?.ref_echart1.get)

							var myChart = echarts.init(document.getElementById('main6'));

							myChart.setOption({
								xAxis: {
									show: false,/*x轴*/
									type: 'category',
									data: list2
								},
								yAxis: {
									show: false,
									type: "value",
								},
								tooltip: {
									trigger: 'item',
									formatter: '{d}%'
									// formatter: '{a} <br/>{b} : {c} ({d}%)'
								},
								legend: {
									/*是否显示图例 图谱位置 显示内容对应*/
									show: false,
									left: 'center',
									bottom: 50,
									data: list2
								},
								series: [
									{
										name: '',
										type: 'pie',
										radius: '70%',/*图谱大小*/
										center: ['50%', '53%'],/*xy水平方位*/
										minAngle: 10,/*每块扇形最小占比*/
										label: {
											show: true,
											position: 'outside',//显示视觉引导线
										},
										labelLine: { //设置引导线长度
											show: true,
											length: 15,
											length2: 9,
											lineStyle: {
												// color: '#5793F3',
												width: 1,
												type: 'solid'
											}
										},
										data: list2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };

											return { name: it.schoolName + ' ' + it.totalCount + '人', value: it.totalCount };
										}.bind(this)),
										itemStyle: {
											normal: {
												color: function (params) {
													var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3',
														'#f47e39', '#934855', '#158968', '#e74c3c', '#2ecc71',
														'#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#1abc9c',
														'#34495e', '#7f8c8d', '#95a5a6', '#16a085', '#27ae60', '#f4cccc', '#7f6000', '#a64d79'];
													return colorList[params.dataIndex];
												}
											},
										},
										emphasis: {
											itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}
								]
							}, true);
							// this.active = {school: true}
						}.bind(this));
					},
					changeTime5() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal5[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal5[1]).format('YYYY-MM-DD')
							}
						};
						axios.get('/pc/enrollment/getCourse', param).then(function (res) {
							let list2 = res.data;
							var myChart = echarts.init(document.getElementById('main5'));
							var myChart2 = echarts.init(document.getElementById('main6'));
							myChart2.clear();
							myChart.setOption({
								xAxis: {
									show: false,/*x轴*/
									type: 'category',
									data: list2
								},
								yAxis: {
									show: false,
									type: "value",
								},
								tooltip: {
									trigger: 'item',
									formatter: '{d}%'
									// formatter: '{a} <br/>{b} : {c} ({d}%)' 
								},
								legend: {
									/*是否显示图例 图谱位置 显示内容对应*/
									show: false,
									left: 'center',
									bottom: 50,
									data: list2
								},
								series: [
									{
										name: '',
										type: 'pie',
										radius: '70%',/*图谱大小*/
										center: ['50%', '53%'],/*xy水平方位*/
										minAngle: 10,/*每块扇形最小占比*/
										selectedMode: 'single',
										selectedOffset: 30,
										clockwise: true,
										label: {
											show: true,
											position: 'outside',//显示视觉引导线
										},
										labelLine: { //设置引导线长度
											show: true,
											length: 15,
											length2: 9,
											lineStyle: {
												// color: '#5793F3',
												width: 1,
												type: 'solid'
											}
										},
										data: list2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };
											return { name: it.courseName + ' ' + it.count + '人', value: it.count, courseId: it.courseId };
										}.bind(this)),
										itemStyle: {
											normal: {
												color: function (params) {
													var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3',
														'#f47e39', '#934855', '#158968', '#e74c3c', '#2ecc71',
														'#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#1abc9c',
														'#34495e', '#7f8c8d', '#95a5a6', '#16a085', '#27ae60', '#f4cccc', '#7f6000', '#a64d79'];
													return colorList[params.dataIndex];
												}
											},
										},
										emphasis: {
											itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}


								]
							});

							// const myChartContainer = this.$refs?.ref_echart5;
							myChart.on('click', (params) => {
								this.courseId = params.data.courseId
								this.changeTime6()
								// params 包含了点击事件的相关信息
								// 这里包含了点的原始数据
							});
						}.bind(this));
					},
					changeTime4() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal4[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal4[1]).format('YYYY-MM-DD')
							}
						};
						axios.get('/pc/enrollment/getFollowReason', param).then(function (res) {
							let list2 = res.data;
							// this.$refs?.ref_echart1?.resize()
							// const option = this.$refs?.ref_echart1.getOption()
							// console.log('3334', this.$refs?.ref_echart1.get)

							this.$refs?.ref_echart4.setOption({
								xAxis: {
									show: false,/*x轴*/
									type: 'category',
									data: list2
								},
								yAxis: {
									show: false,
									type: "value",
								},
								tooltip: {
									trigger: 'item',
									formatter: '{d}%'
									// formatter: '{a} <br/>{b} : {c} ({d}%)'
								},
								legend: {
									/*是否显示图例 图谱位置 显示内容对应*/
									show: false,
									left: 'center',
									bottom: 50,
									data: list2
								},
								series: [
									{
										name: '',
										type: 'pie',
										radius: '70%',/*图谱大小*/
										center: ['50%', '53%'],/*xy水平方位*/
										minAngle: 10,/*每块扇形最小占比*/
										selectedMode: 'single',
										selectedOffset: 30,
										clockwise: true,
										label: {
											show: true,
											position: 'outside',//显示视觉引导线
										},
										labelLine: { //设置引导线长度
											show: true,
											length: 15,
											length2: 9,
											lineStyle: {
												// color: '#5793F3',
												width: 1,
												type: 'solid'
											}
										},
										data: list2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };
											return { name: it.dataSourceType + ' ' + it.totalCount + '人', value: it.totalCount };
										}.bind(this)),
										itemStyle: {
											normal: {
												color: function (params) {
													var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3',
														'#f47e39', '#934855', '#158968', '#e74c3c', '#2ecc71',
														'#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#1abc9c',
														'#34495e', '#7f8c8d', '#95a5a6', '#16a085', '#27ae60', '#f4cccc', '#7f6000', '#a64d79'];
													return colorList[params.dataIndex];
												}
											},
										},
										emphasis: {
											itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}
								]
							}, true);

							// this.active = {school: true}
						}.bind(this));
					},
					changeTime3() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal3[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal3[1]).format('YYYY-MM-DD')
							}
						};
						axios.get('/pc/enrollment/getNumberApplicant', param).then(function (res) {
							this.data2 = res.data;
							// this.$refs?.ref_echart1?.resize()
							// const option = this.$refs?.ref_echart1.getOption()
							// console.log('3334', this.$refs?.ref_echart1.get)
							var colors = ['#40A9FF', '#000000', '#675bba'];
							this.$refs?.ref_echart3.setOption({
								color: colors,
								tooltip: {
									trigger: 'none',
									axisPointer: {
										type: 'cross'
									}
								},
								title: {
									show: true,
									text: '',
									x: 'center',
								},
								grid: {
									top: 70,
									bottom: 50
								},
								xAxis: [
									{
										name: '学校',
										type: 'category',
										axisTick: {
											alignWithLabel: true
										},
										axisLine: {
											onZero: false,
											lineStyle: {
												color: colors[1]
											}
										},
										axisPointer: {
											// label: {
											// 	formatter: function (params) {
											// 		return params.value + '号考勤次数：' + params.seriesData[0].data;
											// 	}
											// }
										},
										data: this.data2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };
											return it.schoolName;
										}.bind(this)),
									}, {
										type: 'category',
										// axisTick: {
										// 	alignWithLabel: true
										// },
										// axisLine: {
										// 	onZero: false,
										// 	lineStyle: {
										// 		color: colors[0]
										// 	}
										// },
									}
								],
								yAxis: [
									{
										type: 'value',
										name: '人数',
										position: 'left',
										alignTicks: true,
										axisLine: {
											show: true,
											lineStyle: {
												color: colors[2]
											}
										},
										axisLabel: {
											formatter: '{value}'
										}
									}
								],
								series: [
									{
										name: '',
										type: 'bar',
										smooth: true,
										label: {
											show: true,
											position: 'top',
											valueAnimation: true
										},
										data: this.data2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };
											return it.totalCount;
										}.bind(this)),
									}
								]
							}, true);
							// this.active = {school: true}
						}.bind(this));
					},
					changeTime2() {
						const param = {
							params: {
								agentId: this.agentId,
								startTime: dayjs(this.timeVal2[0]).format('YYYY-MM-DD'),
								endTime: dayjs(this.timeVal2[1]).format('YYYY-MM-DD')
							}
						};
						axios.get('/pc/enrollment/getDataSource', param).then(function (res) {
							this.list2 = res.data;
							// this.$refs?.ref_echart1?.resize()
							// const option = this.$refs?.ref_echart1.getOption()
							// console.log('3334', this.$refs?.ref_echart1.get)

							this.$refs?.ref_echart2.setOption({
								xAxis: {
									show: false,/*x轴*/
									type: 'category',
									data: this.list2
								},
								yAxis: {
									show: false,
									type: "value",
								},
								tooltip: {
									trigger: 'item',
									formatter: '{d}%'
									// formatter: '{a} <br/>{b} : {c} ({d}%)'
								},
								legend: {
									/*是否显示图例 图谱位置 显示内容对应*/
									show: false,
									left: 'center',
									bottom: 50,
									data: this.list2
								},
								series: [
									{
										name: '',
										type: 'pie',
										radius: '70%',/*图谱大小*/
										center: ['50%', '53%'],/*xy水平方位*/
										minAngle: 10,/*每块扇形最小占比*/
										label: {
											show: true,
											position: 'outside',//显示视觉引导线
										},
										labelLine: { //设置引导线长度
											show: true,
											length: 15,
											length2: 9,
											lineStyle: {
												// color: '#5793F3',
												width: 1,
												type: 'solid'
											}
										},
										data: this.list2.map(function (it, i) {
											// return { name: it.dataSourceType, value: it.totalCount };
											return { name: it.dataSourceType + ' ' + it.totalCount + '人', value: it.totalCount };
										}.bind(this)),
										itemStyle: {
											normal: {
												color: function (params) {
													var colorList = ['#ff4844', '#9ac3e5', '#66ac52', '#ffc032', '#549bd3',
														'#f47e39', '#934855', '#158968', '#e74c3c', '#2ecc71',
														'#3498db', '#9b59b6', '#f1c40f', '#e67e22', '#1abc9c',
														'#34495e', '#7f8c8d', '#95a5a6', '#16a085', '#27ae60', '#f4cccc', '#7f6000', '#a64d79'];
													return colorList[params.dataIndex];
												}
											},
										},
										emphasis: {
											itemStyle: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
										}
									}
								]
							}, true);
							// this.active = {school: true}
						}.bind(this));
					}
				},
				watch: {
					date: function (nv, ov) {
						axios.get('/pc/home/attendance', {
							params: { date: nv, agentId: this.agentId }
						}).then(function (res) {
							this.attendanceCount = res.data;
						}.bind(this));
					}
				},
				computed: {

				}
			})
		</script>
</body>

</html>